<template>
	<view class="content">
		<view class="top_content">
			<view class="swiper_wrap">
				<swiper
					class="the_swiper"
					circular
					indicator-dots="true"
					autoplay
					:interval="5000"
					:duration="2000"
				>
					<template v-for="item in carouselList" :key="item.id">
						<swiper-item class="swiper_item">
							<view class="item_wrap">
								<image
									class="swiper_item_img"
									radius="10rpx"
									mode="widthFix"
									:src="item.image_url"
								></image>
							</view>
						</swiper-item>
					</template>
				</swiper>
			</view>
		</view>
		<view class="association">
			<uni-section title="热门社团" type="line">
				<template v-slot:right>
					<navigator class="more_club" url="/pages/all-club/all-club">更多社团 ></navigator>
				</template>
				<scroll-view
					class="the_scroll_view"
					scroll-x="true"
					:enhanced="true"
					:show-scrollbar="false"
				>
					<view class="asso_content">
						<template v-for="(item, index) in clubsList" :key="item.id">
							<ClubItem :club="item" />
						</template>
					</view>
				</scroll-view>
			</uni-section>
		</view>
		<view class="association">
			<uni-section title="热门帖子" type="line">
				<template v-for="item in postsList" :key="item.id">
					<PostItem :post="item" />
				</template>
			</uni-section>
		</view>
	</view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'

import useHomeStore from '@/store/home.js'
import ClubItem from '@/components/club-item/club-item.vue'
import PostItem from '@/components/post-item/post-item.vue'
import { LIMIT } from '../../global/contants'
import { computed } from 'vue'
// 1.展示轮播图 展示社团数据
const homeStore = useHomeStore()
onShow(() => {
	homeStore.getCarouselsAction()
	homeStore.getClubsListAction(5)
	homeStore.getPostsAction({limit: 5})
})
const { carouselList, clubsList, postsList } = storeToRefs(homeStore)


</script>

<style scoped lang="less">
.content {
	padding: 0 5rpx;
}
// 轮播图相关
.top_content {
	border-radius: 10px;
	background-color: #fff;
	position: relative;
	height: 320rpx;
	.bg_block {
		background-color: var(--themeColor);
		height: 220rpx;
		border-radius: 0 0 50% 50%;
	}

	.swiper_wrap {
		position: absolute;
		transform: translateX(-50%);
		left: 50%;
		bottom: 20rpx;
		width: 95%;
		height: 280rpx;
		.the_swiper {
			height: 100%;
			.swiper_item {
				display: flex;
				justify-content: center;
				align-items: center;
				.item_wrap {
					box-sizing: border-box;
					width: 90%;
					height: 270rpx;
					border-radius: 10rpx;
					margin-bottom: 10rpx;
					padding: 10rpx;
					box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
					image {
						width: 100%;
					}
				}
			}
		}
	}
}

.uni-margin-wrap {
	margin-top: 10rpx;
}
// 中部活跃社团相关
.association {
	border-radius: 10px;
	background-color: #fff;
	width: 100%;
	margin-top: 5rpx;
	padding-bottom: 10rpx;
	.title_wrap {
		padding: 20rpx 40rpx;
		display: flex;
		justify-content: space-between;
		// background-color:pink;
		align-items: center;
		.title {
			font-size: 35rpx;
			font-weight: 700;
		}
		.more {
			padding: 10rpx;
			font-size: 25rpx;
			display: flex;
			align-items: center;
			color: var(--lightTextColor);
		}
	}
	.the_scroll_view {
		width: 100%;
		.asso_content {
			width: 1680rpx;
			padding: 20rpx;
			display: flex;
			flex-wrap: nowrap;
		}
	}
}

.card-actions {
	display: flex;
	justify-content: space-between;
}
.more_club {
	font-size: 30rpx;
	color: rgba(0, 0, 0, 0.6);
}
</style>
